<!-- 统计分析 - 数据目录 -->
<script>
import { defineComponent } from 'vue';
import GlobalCard from '@/components/GlobalCard/global-card.vue';
import iconHushu from '@/components/LayerTree/images/icon-户数.svg';
import iconMianji from '@/components/LayerTree/images/icon-面积.svg';
import SelfHeatMap from "@/utils/Heat/self-heatmap";
import Api from "@/api";
let MyChart = null;
let resetHushuArea = () => { }
function EchartsRenderMain(cateData, mainTotal) {
  mainTotal = Number(Number(mainTotal).toFixed(0));
  MyChart = echarts.init(document.getElementById('Gongretongji-C'));
  let option = {
    tooltip: {
      trigger: 'axis',
      formatter: function (param) {
        const result = param[0].name + "<br/>" + param[0].value + ' ' + '件<br/>';
        return result;
      },
      textStyle: {
        fontFamily: 'ALIBABAPUHUI-REGU'
      }
    },
    grid: {
      top: '15%',
      right: '15%',
      bottom: '15%',
      left: '15%'
    },
    xAxis: [{
      type: 'category',
      name: '时间', // 设置Y轴标题和单位
      nameTextStyle: {
        color: '#fff',
      },
      data: cateData.map(v => v.name),
      axisLine: {
        lineStyle: {
          color: '#999'
        }
      },
      axisLabel: {
        interval: 1
      }
    }],
    yAxis: [{
      type: 'value',
      name: '单位（件）', // 设置Y轴标题和单位
      splitNumber: 5,
      splitLine: {
        lineStyle: {
          type: 'dashed',
          color: '#fff'
        }
      },
      axisLine: {
        show: false,
        lineStyle: {
          color: '#fff'
        },
      },
      nameTextStyle: {
        color: '#fff',
        padding: [10, 0, 0, -20], // 设置位置
      },
      splitArea: {
        show: false
      }
    }],
    series: [{
      name: '投诉件数',
      type: 'line',
      data: cateData.map(v => v.value),
      lineStyle: {
        normal: {
          width: 4,
          color: {
            type: 'linear',
            colorStops: [{
              offset: 0,
              color: '#A9F387' // 0% 处的颜色
            }, {
              offset: 1,
              color: '#48D8BF' // 100% 处的颜色
            }],
            globalCoord: false // 缺省为 false
          },
          shadowColor: 'rgba(72,216,191, 0.3)',
          shadowBlur: 5,
          shadowOffsetY: 8
        }
      },
      itemStyle: {
        normal: {
          color: '#fff',
          borderWidth: 4,
          shadowColor: 'rgba(72,216,191, 0.3)',
          shadowBlur: 10,
          borderColor: '#A9F387'
        }
      },
      smooth: true
    }]
  };
  MyChart.setOption(option);
}
export default defineComponent({
  name: "SectionOne",
  components: {
    GlobalCard,
  },
  setup() {
  },
  data() {
    return {
      // 记录当前应该查询的数据的情况，比如该数据是在查供热企业？热源？换热站？供热范围？
      recordData: {
        // all 全部
        // part 分部
        dataType: 'all',
        // enterprise 企业
        // heat-source 热源
        // heat-huanre 换热站
        // heat-fanwei 供热范围
        type: 'enterprise',
        // 携带的数据
        data: null
      },
      iconHushu: iconHushu,
      iconMianji: iconMianji,
      data_5: 0,
      data_6: 0,
      activeId: 'month',//month week day
    }
  },
  mounted() {
    setTimeout(() => {
      this.setSelect(this.activeId);
    }, 30)

    // 重置户数数据 面积数据 重要
    resetHushuArea = ({ data, type, dataType }) => {
      this.recordData.type = type;
      // 需要查全部数据还是部分数据
      // all 全部数据
      // part 部分数据
      this.recordData.dataType = dataType;
      // 携带的数据
      this.recordData.data = data;

      this.setSelect(this.activeId);
    }
    this.$MITT_BUS.on('reset-hushu-area', resetHushuArea)
  },
  unmounted() {
    this.$MITT_BUS.off('reset-hushu-area', resetHushuArea)
    resetHushuArea = () => { }
  },
  watch: {
  },
  computed: {
  },
  beforeRouteLeave() { },
  methods: {
    setSelect(e) {
      if (MyChart) {
        MyChart.dispose();
      }
      let cateData = [];
      let mainTotal = 0;
      if (e === 'month') {
        cateData = [{
          name: '11月',
          value: 12
        }, {
          name: '12月',
          value: 30
        }, {
          name: '1月',
          value: 23
        }, {
          name: '2月',
          value: 20
        }, {
          name: '3月',
          value: 12
        }]
        mainTotal = cateData.map(v => v.value).reduce((a, b) => a + b, 0)
        EchartsRenderMain(cateData, parseInt(mainTotal))
      }
    },
    switchChange(e) {
      const heatPointsArr = [
        [120.02614462389809, 36.2702978610004],
        [120.02480566463399, 36.27000603587378],
        [120.02538931357756, 36.27002320305921],
        [120.02581846701995, 36.27017769725073],
        [120.0250288249479, 36.26950821892835],
        [120.02544081251452, 36.26959404961683],
        [120.02600729427266, 36.26966271311987],
        [120.026367784212, 36.26962838136835],
        [120.02506315669942, 36.26919922792597],
        [120.025526643203, 36.26949105174292],
        [120.02593863076962, 36.26901040067325],
        [120.02547514426604, 36.26899323479749],
        [120.0263334511508, 36.26887307104782],
        [120.02523926466226, 36.280166769242804],
        [120.0258872866222, 36.28014960271221],
        [120.02608040567127, 36.280115270796976],
        [120.02625635851716, 36.28007664692168],
        [120.02653530825471, 36.28005518924956],
        [120.02545384138345, 36.2799908162332],
        [120.02574566585524, 36.27994360942002],
        [120.02612761248444, 36.27986207020049],
        [120.02656534886471, 36.27982344632519],
        [120.0251062271606, 36.27976765657413],

        [120.02191807393183, 36.27220541495778],
        [120.02249313928269, 36.27223974736414],
        [120.02160908358428, 36.27207666892507],
        [120.02170349721064, 36.271621766014206],
        [120.02341152804229, 36.2716389325448],
        [120.0236776030456, 36.27157026773209],

        [120.00843144252626,36.27464686692291],
        [120.00877476528017,36.27471553108079],
        [120.00904942322136,36.27465544986079],
        [120.00934983063102,36.27467261573655],
        [120.00976181819765,36.27457820211019],
        [120.00899792493924,36.274432290201716],
        [120.00971890285341,36.27379714297602],
        [120.00886059596864,36.27389155660238],
        [120.00906658909712,36.27441512367112],
        [120.00936699650678,36.274500954359596],
        [120.00960732269645,36.274226296418405],
        [120.00960732269646,36.274226296418406],
      ];

      if (e) {
        SelfHeatMap.create({
          map: MAIN_STORE.GLOBAL_MAP_INS,
          heatPointsArr: heatPointsArr
        })
      } else {
        let ins = SelfHeatMap.getIns()
        if (ins) {
          ins.destroy();
        }
      }
    }
  }
});
</script>
<template>
  <div class="section-three">
    <GlobalCard :mainTitle="'投诉趋势统计'" @change="(e) => { setSelect(e) }" :showSwitch="true" @switch-change="switchChange"
      :switchName="'投诉热点'">
      <template #body>
        <!-- 代码 -->
        <div id="Gongretongji-C" v-loading="true">
        </div>
      </template>
    </GlobalCard>
  </div>
</template>
<style scoped lang="less">
.section-three {
  position: fixed;
  top: 75rem;
  right: 44rem;
}

#Gongretongji-C {
  width: 100%;
  height: 26rem;
}
</style>